<script setup lang="ts">
import { getCurrentInstance, redirectTo, showLoading, showModal } from '@tarojs/taro';
import { APPLY_LIST_QUERY, APPROVE } from '/@/api/modules/parking/park-car-apply';
import { onMounted } from 'vue';
import { state, auditState } from './state';
import { getSysImgUrl } from '/@/utils/index';
import { Tips as AppNutIconTips } from '@nutui/icons-vue-taro';
import { LOGIN_APP } from '/@/api/modules/base/app-sys-user';
const params = getCurrentInstance().router?.params as {
  applyId: string;
};

function agree() {
  showModal({
    title: '审批同意',
    content: '您确定审批同意吗？',
    success: function (response) {
      if (response.confirm) {
        agreeHandle();
      }
    },
  });
}
/**
 *申请同意
 */
function agreeHandle() {
  showLoading();
  APPROVE({
    applyId: params.applyId,
    status: '2',
    auditBy: auditState.auditBy,
    auditByName: auditState.auditByName,
  }).then((res) => {
    if (res.comResp?.code === 100) {
      redirectTo({
        url: `/pages/park/apply/index?applyId=${params.applyId}`,
      });
    }
  });
}

function refuse() {
  showModal({
    title: '审批拒绝',
    content: '您确定审批拒绝吗？',
    success: function (response) {
      if (response.confirm) {
        refuseHandle();
      }
    },
  });
}

/**
 * 申请拒绝
 */
function refuseHandle() {
  showLoading();
  APPROVE({
    applyId: params.applyId,
    status: '3',
    auditBy: auditState.auditBy,
    auditByName: auditState.auditByName,
  }).then((res) => {
    if (res.comResp?.code === 100) {
      redirectTo({
        url: `/pages/park/apply/index?applyId=${params.applyId}`,
      });
    }
  });
}

/**
 * 查询车辆详情
 */
function queryCarDetail() {
  APPLY_LIST_QUERY({
    id: params.applyId,
    comQuery: { page: 1, pageSize: 10 },
  }).then((res) => {
    if (!res.content || !res.content.length) return;
    state.plateNo = res.content[0].plateNo || '_';
    state.note = res.content[0].note || '_';
    state.carPicUrl = res.content[0].carPicUrl;
    state.status = res.content[0].status || 1;
  });
}

onMounted(() => {
  showLoading();
  LOGIN_APP().then((res) => {
    auditState.auditBy = res.sysUserDto.id;
    auditState.auditByName = res.sysUserDto.name || res.sysUserDto.nickName;
    queryCarDetail();
  });
});
</script>

<template>
  <view class="park-apply app-page--1">
    <app-navbar title="停车申请" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="park-apply__wrapper">
        <nut-cell>
          <template v-slot:title>
            <text>车牌号码</text>
            <text>{{ state.plateNo }}</text>
          </template>
        </nut-cell>
        <nut-cell>
          <template v-slot:title>
            <text>申请原因</text>
            <text>{{ state.note }}</text>
          </template>
        </nut-cell>
        <nut-cell>
          <template v-slot:title>
            <text>上传图片</text>
            <view class="park-apply__image-wrapper">
              <image
                v-if="state.carPicUrl"
                :src="getSysImgUrl(state.carPicUrl)"
                class="park-apply__image"
                mode="aspectFill"
              />
              <app-nut-icon-tips v-else />
            </view>
          </template>
        </nut-cell>
      </view>
    </scroll-view>
    <view class="park-apply__footer" v-if="state.status === 1">
      <nut-button class="park-apply__footer-btn" type="info" @click="agree()">同意</nut-button>
      <nut-button class="park-apply__footer-btn" type="danger" @click="refuse()">拒绝</nut-button>
    </view>
    <view class="park-apply__footer-status" v-else>
      <text>{{ state.status === 2 ? '已同意' : '已拒绝' }}</text>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
